import React, { FC, MouseEvent } from 'react'
import { Spin } from 'antd'
import { useDispatch } from 'react-redux'
import classNames from 'classnames'
import useBindCanvasKeyPress from '../../../../hooks/useBindCanvasKeyPress'
import useGetComponentInfo from '../../../../hooks/useGetComponentInfo'
import { getComponentConfigByType } from '../../../../components/QuestionComponents'
import {
    ComponentInfoType,
    changeSelectedId,
    moveComponent,
} from '../../../../store/componentsReducer'
import SortableContainer from '../../../../components/DragSortable/SortableContainer'
import SortableItem from '../../../../components/DragSortable/SortableItem'
import styles from './EditCanvas.module.scss'
// import QuestionTitle from '../../../../components/QuestionComponents/QuestionTitle/Component'
// import QuestionInput from '../../../../components/QuestionComponents/QuestionInput/Component'

type PropsType = {
    loading: boolean
}

function genComponent(componentInfo: ComponentInfoType) {
    const { type, props } = componentInfo
    const componentConfig = getComponentConfigByType(type)
    if (componentConfig == null) return null
    const { Component } = componentConfig
    return <Component {...props} />
}

const EditCanvas: FC<PropsType> = ({ loading }) => {
    const { componentsList, selectedId } = useGetComponentInfo()
    const dispatch = useDispatch()

    useBindCanvasKeyPress() // 绑定键盘快捷键
    function handleClick(event: MouseEvent, id: string) {
        event.stopPropagation()
        dispatch(changeSelectedId(id))
    }

    if (loading) {
        return (
            <div style={{ textAlign: 'center', marginTop: '100px' }}>
                <Spin />
            </div>
        )
    }

    /**
     * 拖拽结束事件，通过newIndex和oldIndex来重置组件显示顺序
     * @param oldIndex
     * @param newIndex
     */
    const handleDragEnd = (oldIndex: number, newIndex: number) => {
        dispatch(moveComponent({ oldIndex, newIndex }))
    }

    // 拖拽组件SortableContainer 的item需要id，则需要给数据手动添加一个id进去
    const componentsListWithId = componentsList.map(c => {
        return { ...c, id: c.fe_id }
    })

    return (
        <SortableContainer items={componentsListWithId} onDragEnd={handleDragEnd}>
            <div className={styles.canvas}>
                {componentsList
                    .filter(c => !c.isHidden)
                    .map(cmpItem => {
                        const { fe_id, isLocked } = cmpItem
                        const wrapperDefaultClassName = styles['component-wrapper']
                        const selectedClassName = styles['selected']
                        const lockedClassName = styles.locked
                        const wrapperClassName = classNames({
                            [wrapperDefaultClassName]: true,
                            [selectedClassName]: fe_id === selectedId,
                            [lockedClassName]: isLocked,
                        })
                        return (
                            <SortableItem key={fe_id} id={fe_id}>
                                <div
                                    key={fe_id}
                                    className={wrapperClassName}
                                    onClick={e => handleClick(e, fe_id)}
                                >
                                    <div className={styles.component}>{genComponent(cmpItem)}</div>
                                </div>
                            </SortableItem>
                        )
                    })}
            </div>
        </SortableContainer>
    )
}
export default EditCanvas
